<template>
  <div class="page">
    <!-- 导航栏 --><router-view
    ></router-view>
    <van-nav-bar fixed placeholder>
      <template #title>
        <router-link to="/search" class="page-header-searchbox">
          <van-icon name="search" /><span>搜索</span>
        </router-link>
      </template>
    </van-nav-bar>

    <!-- tabs标签页 -->
    <van-tabs v-model="active" border @click="switchTab">
      <van-tab v-for="item in cate" :key="item._id" :title="item.name">
      </van-tab>
    </van-tabs>
    <!-- <div v-for="(v, index) in cate" :key="index">
      {{ v.sort }}
    </div> -->

    <!-- 内容 -->
    <div class="home-article-list" style="padding-bottom: 50px">
      <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getArtList"
          :immediate-check="false"
        >
          <!-- //初始化后  会立刻执行一次  getArtList   cate_id   '' -->

          <!-- loading 是否转圈  是否正在加载中 -->
          <div class="page-article-list">
            <li
              v-for="(item, index) in articleList"
              :key="item._id"
              @click="
                $router.push({
                  path: '/article',
                  query: { article_id: item._id, title: item.title },
                })
              "
            >
              <div class="box1">
                <p>{{ item.title }}</p>
                <div
                  :class="{
                    hide: item.poster_type == 1,
                    rightImg: item.poster_type == 2,
                    articleImg: item.poster_type == 3,
                  }"
                >
                  <img v-for="img in item.imageSrc" :src="img" />
                </div>
                <div class="comments">
                  <span>{{ item.author }}</span>
                  <span>{{ item.comment }}评论</span>
                  <span>{{ item.time }}</span>
                </div>
              </div>
            </li>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- 底部栏 -->
    <tabBar></tabBar>
  </div>
</template>
<script>
import Tabbar from "@/components/tabBar";
import { getCateList, getArticleList } from "@/api/pages";
import { Search, Tab, Tabs, List, PullRefresh, Grid, GridItem } from "vant";

export default {
  data() {
    return {
      cate: [], //第一拿到数据为空
      articleList: [], //文章列表
      value: "",
      active: "",
      active: 0,
      active_cate_id: "", //当前被选中的那一项的分类id
      loading: false,
      finished: false, //是否 全部 加载完毕了
      skip: 0,
      limit: 20,
      isRefresh: false, //是否正在刷新
    };
  },
  components: {
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Tabbar.name]: Tabbar,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
  },

  mounted() {
    this.getCate();
    // this.$http
    //   .post("/api/get_cate_list")
    //   .then((result) => {
    //     console.log(result);
    //     this.cate = result.data.data;
    //   })
    //   .catch((err) => {});
  },
  methods: {
    //下拉刷新
    onRefresh() {
      this.skip = 0;
      this.finished = false;
      this.getArtList(true);
    },

    //分类切换
    switchTab() {
      //点击获取到当前高亮的索引
      this.active_cate_id = this.cate[this.active]._id; //获取到目前高亮的栏目的id

      this.articleList = [];
      this.skip = 0;
      this.finished = false; //finished  状态得重置
      this.getArtList();
    },
    //获取分类
    getCate() {
      getCateList().then((res) => {
        ///getCateList 对api的封装
        console.log(res);
        this.cate = res.data;
        //第一次拿到数据为空继续执行 检测到数据
        //对cate进行了更改 vue视图更新

        //待 拿到分类数据后 去取第一个栏目的id
        this.active_cate_id = this.cate[this.active]._id; //获取到目前高亮的栏目的id
        this.getArtList();
      });
    },
    // get() {},

    //获取文章列表
    getArtList(flag) {
      // console.log("--------------");
      let { active_cate_id, skip, limit } = this;
      //skip 从哪一条开始算 这个数据需要时动态
      //0 20 40

      getArticleList({
        cate_id: active_cate_id,
        skip,
        limit,
      }).then((res) => {
        // console.log(res);

        if (flag) {
          //如果是刷新操作
          this.isRefresh = false; //结束下拉刷新的转圈
          this.articleList = res.data; //刷新：清零从0开始 替换为新的
        } else {
          //[20] [40]
          this.articleList.push(...res.data); //新数据和老数据 拼接
        }

        let len = this.articleList.length; //数量

        //判断数据加载完没   res.count 服务器返回  数据总数
        if (len >= res.count) {
          this.finished = true; // 数据加载完 再往上不触发load事件
        } else {
          this.skip = len; //skip 更新
          this.loading = false; //我可以继续加载
        }

        // 如果加载完 loading=>false
        // 反之 loading  false
      });
    },
  },
};
</script>
<style lang="less">
// search
.page {
  .page-header-searchbox {
    height: 32px;
    width: 290px;
    background-color: #66d79d;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: @color2;
  }
  // tabs
  .van-tabs--line {
    border-bottom: 1px solid @color1;
  }
  .van-tabs__line {
    bottom: 5vw;
    border-radius: 0vw;
  }
  .van-tab {
    border-right: 1.3px solid @color1;
  }
  // .van-tab.tiem:nth-child(!n){
  //   border-right: 1.3px solid #edeff2;
  // }
  .page-article-list {
    overflow: hidden;
    .box1 {
      border-bottom: 1px solid @color1;
      .comments {
        font-size: 13px;
        float: left;
        padding-left: 16px;
        color: #97999d;
      }
    }
    p {
      padding-left: 16px;
      font-weight: bold;
    }
    img {
      max-width: 100%;
    }
  }
}
</style>